<template>
  <div style="line-height: 50px;display: flex;background-color: hsl(220, 70%, 26%);">
    <div style="width: 400px;margin-left:10px; font-weight: bold;font-size: 20px; color:#fff">后台管理</div>
    <div style="flex: 1"></div>
    <span v-bind:interval="'1000'">{{ this.datime }}</span>
    <div class="right-info">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link el-icon-user" style="color: #fff;">
          个人中心<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <template slot="dropdown">
          <el-dropdown-menu>
            <el-dropdown-item @click.native="selfInfoManage">个人信息</el-dropdown-item>
            <el-dropdown-item @click.native="SignOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
// 格式化日对象
const getNowDate = () => {
  var date = new Date();
  var sign2 = ":";
  var year = date.getFullYear() // 年
  var month = date.getMonth() + 1; // 月
  var day = date.getDate(); // 日
  var hour = date.getHours(); // 时
  var minutes = date.getMinutes(); // 分
  var seconds = date.getSeconds() //秒
  var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
  var week = weekArr[date.getDay()];
  // 给一位数的数据前面加 “0”
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  if (day >= 0 && day <= 9) {
    day = "0" + day;
  }
  if (hour >= 0 && hour <= 9) {
    hour = "0" + hour;
  }
  if (minutes >= 0 && minutes <= 9) {
    minutes = "0" + minutes;
  }
  if (seconds >= 0 && seconds <= 9) {
    seconds = "0" + seconds;
  }
  return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
}


export default {
  name: "Header",
  data() {
    return {
      name: '',
      datime: getNowDate()
    }
  },
  created() {
    setInterval(() => {
      this.datime = getNowDate()
    }, 1000)
  },
  methods: {
    SignOut() {
      this.$message({
        message: "退出成功",
        type: 'success'
      });
      window.sessionStorage.removeItem("token");
      this.$router.replace({ path: '/login' });
    },
    selfInfoManage() {
      this.$router.replace("/selfInfo")
      console.log('111')
    },
  },
}
</script>
<style scoped>
.right-info {
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.5%;
}
.right-info:hover {
  cursor: pointer;
}
span {
  width: 200px;
  color: #fff;
}
</style>